<template>
    <header :style="{
                paddingTop: `${statusBarHeight}px`,
                backgroundColor
            }">
        <!-- 左侧按钮 -->
        <button class="icon left"
                :style="{
                    backgroundImage:`url(${leftIconUrl})`,
                    opacity: disabled ? '.4' : ''
                }"
                @click="$router.push('/')"></button>
        <!-- 中间标题 -->
        <div class="title-container">
            <!-- 主标题 -->
            <h1 class="title"
                :style="{color: titleColor}">{{title}}</h1>
            <!-- 副标题 -->
            <h2 v-if="subTitle"
                class="subtitle"
                :style="{color: subTitleColor}">{{subTitle}}</h2>
        </div>
        <!-- 右侧按钮 -->
        <button 
                class="icon right"
                :style="{
                    backgroundImage:`url(${rightIconUrl})`
                }"
                @click="$emit('rightClick')"></button>
        <slot></slot>
    </header>
</template>

<script>
import { mapState, mapGetters } from 'vuex';
export default {
    props: {
        // 主标题
        title: {
            default: '',
            type: String
        },
        titleColor: {
            default: '',
            type: String
        },
        // 副标题
        subTitle: {
            default: '',
            type: String
        },
        subTitleColor: {
            default: '',
            type: String
        },
        // 左侧图标
        leftIcon: {
            default: '',
            type: String
        },
        // 右侧图标
        rightIcon: {
            default: '',
            type: String
        },
        backgroundColor: {
            type: String
        },
        disabled: {
            default: false,
            type: Boolean
        }
    },
    computed: {
        ...mapState([
            'statusBarHeight'
        ]),
        ...mapGetters([
            'imgPath'
        ]),
        leftIconUrl() {
            if (!this.leftIcon && this.leftIcon !== null) {
                return require(`../assets/${this.imgPath}ic_back.png`);
            }
            return this.leftIcon;
        },
        rightIconUrl() {
            if (!this.rightIcon && this.rightIcon !== null) {
                return require(`../assets/${this.imgPath}ic_more.png`);
            }
            return this.rightIcon;
        }
    }
};
</script>

<style lang="less" scoped>
@import url("../style/public.less");
header {
    width: 100%;
    height: 56px;
    position: fixed;
    top: 0;
    left: 0;
    z-index:19999999;
    display: flex;
    align-items: center;
    overflow: hidden;
    background-color: var(--emui_color_subbg);
    .title-container {
        flex: 1;
        text-align: left;
        overflow: hidden;
        z-index: 10;
        .title {
            width: 100%;
            font-size: var(--emui_text_size_headline8_px);
            color: var(--emui_text_primary);
            font-weight: normal;
            .medium();
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        .subtitle {
            font-size: var(--emui_text_size_overline_px);
            color: var(--emui_text_secondary);
            font-weight: normal;
        }
    }
    .icon {
        width: 24px;
        height: 48px;
        padding: 0 12px;
        margin: 4px;
        background-size: 24px;
        background-repeat: no-repeat;
        box-sizing: content-box;
        background-position: center;
        z-index: 10;
        &.left {
            margin-left: 12px;
        }
        &.right {
            margin-right: 12px;
        }
        &:active {
            border-radius: 8px;
            background-color: var(--emui_clickeffic_default_color);
        }
    }
}
</style>
